import React, {Component} from 'react';
import WebMeHeader from './header'
import WebAboutMe from './aboutMe'
import WebMeSkills from './skills'
import WebMeGrowth from './growth'
import WebMeExperience from './experience'
import MeModel from '../../../models/meModel'
import WLoading from '../../../components/loading';
import styles from './index.module.scss'
import { updateWebNavIndex } from '../../../store/app/actions'


interface StateInterface {
  meModel?: MeModel
}

interface PropsInterface {
}

class WebMe extends Component<PropsInterface, StateInterface> {

  state: Readonly<StateInterface> = {}

  componentDidMount() {
    this.getData()
    updateWebNavIndex('1')
  }

  getData() {
    MeModel.getData().then((model: MeModel) => {
      this.setState(() => {
        return {
          meModel: model
        }
      })
    }).catch((e: any) => {
      console.log(e)
    })
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    return (
      <div className={ `w-content-box ${ styles['web-me'] }` }>
        {
          this.state.meModel ? [
            <WebMeHeader key='WebMeHeader' icon={ this.state.meModel.home_icon } title={this.state.meModel.home_title} resume={this.state.meModel.home_jianli} />,
            <WebAboutMe key='WebAboutMe' aboutArr={ this.state.meModel.aboutArr } />,
            <WebMeSkills key='WebMeSkills' meModel={ this.state.meModel }/>,
            <WebMeExperience key='WebMeExperience' meModel={ this.state.meModel }/>,
            <WebMeGrowth key='WebMeGrowth' meModel={ this.state.meModel }/>
          ]
          : 
          <WLoading height="calc(100vh - 162px)"/>
        }
      </div>
    );
  }
}

export default WebMe;
